<template>
    <div>
        <h1>v-for指令比那里数组</h1>
        <div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
        <div>
            <ul>
                <!--
                注意:
                    1. 在这里使用v-for指令是, 必须用`v-bind:key="item"`这样绑定循环元素, 否则会报错: `Elements in iteration expect to have 'v-bind:key' directives`
                    2. v-bind:key绑定的作用是: 确保dom元素的唯一性, 可以提高渲染dom的性能.
                -->
                <li v-for="(item, index) in arrData" v-bind:key="index">{{ index + 1 }}. {{ item }} </li>
            </ul>
        </div>

        <div>
            <ul>
                <!--
                功能:
                    使用v-for来遍历对象.
                说明:
                    1. 对象的遍历和数组的遍历不一样, `v-for="(value, key, index) in objArr"`指令说明:
                        - value: 对应js对象的key对应的value.
                        - key: 对应js对象的key.
                        - index: 对应索引.
                        - 注意的是: 参数名称并不限定, 而是根据参数的顺序进行匹配的.
                -->
                <li v-for="(value, key, index) in obj" :key="index">{{ key }} : {{ value }}</li>
            </ul>
        </div>

        <div>
            <!--
            功能:
                双层for循环.
            -->
            <ul v-for="(item, index) in objArr" :key="index">
                <li v-for="(temp, index1) in item" :key="index1">{{ temp }}</li>
            </ul>

            <!--
            功能:
                点出第一层循环的迭代子的值.
            -->
            <ul v-for="(item, index) in objArr" :key="index">
                <li>姓名: {{ item.name }}, 年龄: {{ item.age }}, 性别" {{  item.sex  }}</li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "For",
        data() {
            return {
                arrData: ['s1', 's2', 's3'],
                obj: {
                    name: '张三',
                    age: 18,
                    sex: '男'
                },
                objArr: [
                    {
                        name: '张三1',
                        age: 18,
                        sex: '男'
                    },
                    {
                        name: '张三2',
                        age: 28,
                        sex: '女'
                    },
                    {
                        name: '张三3',
                        age: 38,
                        sex: '男'
                    }
                ]
            };
        }
    }
</script>

<style scoped>

</style>